<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="账期">
          <el-date-picker value-format="yyyyMM" v-model="form.acctMonth" style="width: 140px" type="month" placeholder="请选择账期" :picker-options="endDateDisabled"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" plain @click="exportExcel">导出Excel</el-button>
          <!-- <el-button type="primary" plain @click="exportPpt">导出PPT</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="initTable()">
      <el-tab-pane label="月度环比" name="1">
        <WholeView :form="searchData" ref="hbMonth"></WholeView>
      </el-tab-pane>
      <el-tab-pane label="累计同比" name="2">
        <OverallTrend :form="searchData" ref="tbCumulative"></OverallTrend>
      </el-tab-pane>
      <el-tab-pane label="季度环比" name="3">
        <BusinessUnit :form="searchData" ref="hbQuarter"></BusinessUnit>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

import { downLoadExcelBody, downLoadPptBody } from "@/utils/zipdownload";

import $barCodeApi from "@/api/barCode/index";
import WholeView from "./components/wholeView.vue";
import OverallTrend from "./components/overallTrend.vue";
import BusinessUnit from "./components/businessUnit.vue";


export default {
  name: "barCode",
  components: {
    WholeView,
    OverallTrend,
    BusinessUnit,
  },
  data () {
    return {
      form: {
        acctMonth: "",
      },
      searchData: {
        acctMonth: "",
      },
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      activeName: "1"
    };
  },
  computed: {

  },
  created () {
    this.getMaxMonths();
  },
  mounted () {

  },
  methods: {
    pickerDisabled () {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
                n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        }
      };
    },
    getMaxMonths () {
      return new Promise(resolve => {
        $barCodeApi.getMaxMonths({}, res => {
          resolve(res.msg);
          this.form.acctMonth = res.content;
          this.disabledTime = res.content;
          this.handleQuery();
        });
      });
    },
    exportExcel () {
      let obj = Object.assign({}, this.form);
      let fileName = obj.acctMonth + "_" + "月度简报2";
      downLoadExcelBody("/briefing/briefingExport", obj, fileName);
    },
    // exportPpt () {
    //   let nodesInfo = this.$refs["cascader"].getCheckedNodes();
    //   let obj = Object.assign({}, this.form);
    //   let fileName =
    //     obj.acctMonth + "_" + nodesInfo[0].label + "_" + "月度简报";
    //   downLoadPptBody("/mhIncome/exportPPT", obj, fileName);
    // },
    handleQuery () {
      this.searchData.areaId = this.form.areaId;
      this.searchData.acctMonth = this.form.acctMonth;
      this.initTable();
    },
    initTable () {
      const { activeName } = this;
      if (activeName == 1) {
        this.$refs.hbMonth.getList();
      } else if (activeName == 2) {
        this.$refs.tbCumulative.getList();
      } else if (activeName == 3) {
        this.$refs.hbQuarter.getList();
      }
    }
  }
};
</script>
